﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Dashboard.css" rel="stylesheet" />    
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <style>
            li ul li {
                padding-left: 35px;
            }             
        </style>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Wedding Admin</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">样式设置</a></li>
                    <li><a href="#">喜帖设置</a></li>
                    <li><a href="#">预览</a></li>
                    <li><a href="/Default/About">用户信息</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Search...">
                </form>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
                    <li>
                        <a href="#" data-toggle="collapse" data-target="#nav1">样式设置</a>
                        <ul id="nav1" class="nav nav-sidebar collapse" style="">
                            <li><a href="#">样式设置1</a></li>
                            <li><a href="#">样式设置2</a></li>
                            <li><a href="#">样式设置3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" data-toggle="collapse" data-target="#nav2">喜帖设置</a>
                        <ul id="nav2" class="nav nav-sidebar collapse">
                            <li><a href="#">喜帖设置1</a></li>
                            <li><a href="#">喜帖设置2</a></li>
                            <li><a href="#">喜帖设置3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" data-toggle="collapse" data-target="#nav3">预览</a>
                        <ul id="nav3" class="nav nav-sidebar collapse">
                            <li><a href="#">预览1</a></li>
                            <li><a href="#">预览2</a></li>
                            <li><a href="#">预览3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" data-toggle="collapse" data-target="#nav4">用户信息</a>
                        <ul id="nav4" class="nav nav-sidebar collapse">
                            @* “预览1” 单击时 active 出错*@
                            <li><a href="/User/Index">预览1</a></li>
                            <li><a href="#">预览2</a></li>
                            <li><a href="#">预览3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                @*<h1 class="page-header">Dashboard</h1>*@
                <h1 class="page-header">@ViewBag.Title</h1>
                <div class="row placeholders">
                    @RenderBody()
                </div>
                <hr />
                <footer>
                    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
                </footer>
            </div>
        </div>            
    </div>    
    

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = window.location.href;            
            $("li a[href='" + url + "']").each(function (index, element) {                
                $(this).parent("li").addClass("active");                
            });
            linkActive();
        });

        function linkActive() {
            $("li a").click(function () {
                $("li[class='active']").removeClass("active");
                $(this).parent("li").addClass("active");
            });
        }
    </script>
</body>
</html>